<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			<view class="tip">
				 <text>退款原因</text>
			</view>
			<view style="margin-top:30rpx;">
				<u-checkbox-group v-model="checked" iconPlacement="right" placement="column">
										
					<u-checkbox activeColor="#277EEF" :label="item.label" :name="item.label"
					:customStyle="{
						marginBottom: '20rpx',backgroundColor: '#F8F8F8',padding:'20rpx',borderRadius:'10rpx'
					}"
					v-for="(item,index) in reasonList" :key="index"></u-checkbox>
					 
				</u-checkbox-group>  
			
			</view>
			 
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto;" @click="handleChange">
				确认
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	import { userInfoAPI,createpointAPI} from "@/api/user.js"
	import { getDictDataAPI} from "@/api/api.js"

	export default {
		name:"woods-popupModal",
		props: {
			 dict:{
				 type:String,
				 default:""
			 }
		},
		 
		data() {
			return {
				visible:false,
				 
				checked:[],
				 reasonList :[]
			};
		},
		 
		created() {
			this.getdata()
		}, 
		methods:{
			 getdata(){
				getDictDataAPI(this.dict).then(res=>{
					this.reasonList=res
				})
			} ,
			 
			/*
			@description 回调事件
			*/ 
			handleChange(){
				if(this.checked.length){
					this.visible=false
					this.$emit("handleChange",this.checked)
				}else{
					uni.showToast({
						title:'请选择原因',
						icon:'none'
					})
				}
				 
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	 
}
 
</style>